<template>
  <lay-form style="height:100%;padding: 1px;box-sizing: border-box;" class="centerForm" required
    :requiredIcons="formProps.requiredIcons" v-if="formProps">
    <lay-form-item :label="item.formItemProps.label" v-for="(item, i) in formArray" :key="item._id"
      :prop="item.formItemProps.required ? item._id : false" @click="chooseItem(i)"
      :class="[chooseIndex === i ? 'chooseItem' : '', !item.formItemProps.required ? 'hidde-error-text' : '']"
      :label-position="item.formItemProps.labelPosition"
      :label-width="item.formItemProps.labelWidth"
      >
      <div class="form-item" :style="{ paddingTop: item.type === 'switch' ? '4px' : '' }">
        <lay-input v-if="item.type === 'input'" :placeholder="item.formItemProps.placeholder" :disabled="item.formItemProps.disabled" :allow-clear="item.formItemProps.allowClear" :size="item.formItemProps.size" v-model="state[item._id]"></lay-input>
        <lay-input-number v-else-if="item.type === 'inputNumber'" :disabled="item.formItemProps.disabled" :size="item.formItemProps.size" v-model="state[item._id]"></lay-input-number>
        <lay-switch v-else-if="item.type === 'switch'" :disabled="item.formItemProps.disabled" :size="item.formItemProps.size" v-model="state[item._id]"></lay-switch>
        <lay-textarea v-else-if="item.type === 'textarea'" :placeholder="item.formItemProps.placeholder" :disabled="item.formItemProps.disabled" :allow-clear="item.formItemProps.allowClear" :size="item.formItemProps.size" v-model="state[item._id]"></lay-textarea>
        <lay-color-picker v-else-if="item.type === 'colorPicker'" :disabled="item.formItemProps.disabled" v-model="state[item._id]"></lay-color-picker>
        <lay-date-picker v-else-if="item.type === 'datePicker'" :placeholder="item.formItemProps.placeholder" :disabled="item.formItemProps.disabled" :allow-clear="item.formItemProps.allowClear" :size="item.formItemProps.size" v-model="state[item._id]"></lay-date-picker>
        <lay-cascader v-else-if="item.type === 'cascader'" :options="item.formItemProps.options" :placeholder="item.formItemProps.placeholder" :disabled="item.formItemProps.disabled" :allow-clear="item.formItemProps.allowClear" :size="item.formItemProps.size" v-model="state[item._id]"></lay-cascader>
        <lay-rate v-else-if="item.type === 'rate'" :disabled="item.formItemProps.disabled" :allow-clear="item.formItemProps.allowClear" v-model="state[item._id]"></lay-rate>
        <lay-slider :showDots="false" :step="10" :min="0" :max="100" v-else-if="item.type === 'slider'" v-model="state[item._id]" style="width:100%" :disabled="false"></lay-slider>
        <lay-select v-else-if="item.type === 'select'" :placeholder="item.formItemProps.placeholder" :disabled="item.formItemProps.disabled" :allow-clear="item.formItemProps.allowClear" :size="item.formItemProps.size" v-model="state[item._id]">
          <lay-select-option :value="selectItem.value" :label="selectItem.label" v-for="(selectItem,i) in item.formItemProps.options"></lay-select-option>
        </lay-select>
        <lay-radio-group v-else-if="item.type === 'radio'" :disabled="item.formItemProps.disabled" v-model="state[item._id]">
          <lay-radio :value="radioItem.value" :label="radioItem.label" v-for="(radioItem,i) in item.formItemProps.options"></lay-radio>
        </lay-radio-group>
        <lay-checkbox-group v-else-if="item.type === 'checkbox'" :disabled="item.formItemProps.disabled" v-model="state[item._id]">
          <lay-checkbox :name="item.formItemProps.prop" skin="primary" :value="optionItem.value" :label="optionItem.label"
            v-for='(optionItem, index) in item.formItemProps.options' :key="item._id + index">{{ optionItem.label }}
          </lay-checkbox>
        </lay-checkbox-group>
        <div class="form-item-action">
          <lay-button type="normal" size="sm" @click="copy(i)">复制</lay-button>
          <lay-button type="danger" size="sm" @click="del(i)">删除</lay-button>
        </div>
      </div>
    </lay-form-item>
  </lay-form>
  <lay-transition type="fade" :time="0.3">
    <lay-empty description="从左侧拖入或点选组件进行表单设计" v-show="formArray.length === 0" class="form-designer-empty">
    </lay-empty>
  </lay-transition>
</template>
<script setup lang="ts">
//@ts-ignore
import Sortable from 'sortablejs';
import { onMounted ,nextTick, ref, reactive} from 'vue';
import { formPropsType, formComponentsType, formComponents } from '../components'
import { useDesigner } from '../useDesigner';

export interface centerFormProps {
  formProps: formPropsType,
  formArray: formComponentsType[],
  chooseIndex: number,
  currentTab: string,
  centerDargBgColor: string,
  leftDragIndex: number
}
const props = withDefaults(defineProps<centerFormProps>(), {

});
const emit = defineEmits(['update:formArray', 'update:chooseIndex', 'update:currentTab', 'update:centerDargBgColor'])
const { addFormComponents, sortArray, deepClone } = useDesigner();

//复制
const copy = (index: number) => {
  let item = props.formArray[index]
  let data = props.formArray
  data.splice(index, 0, item);
  emit('update:formArray', data)
}
//删除
const del = (index: number) => {
  let data = props.formArray
  data.splice(index, 1)
  emit('update:formArray', data)
}
//选中
const chooseItem = (index: number) => {
  emit('update:chooseIndex', index)
  emit('update:currentTab', '2')
}
const state=reactive<any>({})
onMounted(() => {
  nextTick(() => {
    const sortCenter = new Sortable(document.querySelector('.centerForm'), {
      group: {
        name: 'components',
      },
      animation: 150,
      ghostClass: "sortable-ghost",
      filter: ".form-designer-empty",
      onStart: () => {
        emit('update:centerDargBgColor', 'transparent')
      },
      onAdd: function (evt: any) {
        addFormComponents(evt.newIndex, formComponents[props.leftDragIndex] as formComponentsType, props.formArray)
      },
      onEnd: function (evt: any) {
        let arr = deepClone(props.formArray)
        sortArray(arr, evt.oldIndex, evt.newIndex)
        emit('update:formArray', arr)
        emit('update:chooseIndex', evt.newIndex)
      },
    });
  })
})
</script>